import Vue from 'vue'
import Vuex, { Store } from 'vuex'
import http from "@/util/http";

// 数据持久小插件引入
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)

export default new Vuex.Store({

  // 每次数据引入都会在localstoage 缓存数据 达到一个持久化的效果
  plugins: [createPersistedState({
    reducer:(state) => {
      // 规定存储那个值
      return {
      cityId:state.cityId,
      cityName:state.cityName
    }}
  })],
  /* 公共状态 */
  state: {
    cityId: '440100',
    cityName:'广州',
    cinemaList:[],
    isTabbarShow: true
  },
  getters: {
  },
  /* 管理统一修改的状态 被devtools记录状态  只能支持同步 不支持异步 */
  mutations: {
    changeCityName(state,cityName){
      state.cityName = cityName
    },
    changeCityId(state,cityId){
      state.cityId = cityId
    },
    changeCinemaData (state,data){
      state.cinemaList = data
    },
    clearCinmaData(state){
      state.cinemaList = []
    },
    show(state){
      state.isTabbarShow = true
    },
    hide(state){
      state.isTabbarShow = false
    },
  },
  // 支持异步和同步

  // 把数据存在vuex中 避免重复请求
  actions: {
    getCinemaData (store,cityId) {
      http({
        url: `/gateway?cityId=${cityId}&ticketFlag=1&k=9755784`,
        headers: {
          "X-Host": "mall.film-ticket.cinema.list",
        },
      }).then((res) => {
        // console.log(res.data.data.cinemas)
        this.commit('changeCinemaData',res.data.data.cinemas)
      })
    }
  },
  modules: {
  }
})

// vuex 管理保存状态，分散在各个组件内的状态，统一管理


// vuex的 持久化 --todo
// vuex默认管理在内存，一刷新就公共状态

// vuex的应用
// 1.非父子的应用
// 2.后端数据的缓存快照，减少同步数据的请求，减轻服务器的压力，提高用户体验
